<template>
    <div>
        <div>
            <div>
                <p><img src=""/></p>

                <div>
                    <p>Hackandquan</p>

                    <p>
                        <section>
                            <h4>学习时长：</h4>
                    <p>197小时</p>
                    </section>
                    <section>
                        <h4>经验：</h4>

                        <p>3865</p>
                    </section>
                    </p>
                </div>
            </div>
            <ul>
                <li>关注&nbsp;&nbsp;1</li>
                <li>粉丝&nbsp;&nbsp;0</li>
                <li>职粉&nbsp;&nbsp;1</li>
            </ul>
        </div>
        <div style="position:relative;">
        <mt-tabbar :style="{position:position;}" fixed="false">
            <mt-tab-item>
                <img slot="icon" src=""/>
                我的课程
            </mt-tab-item>
            <mt-tab-item>
                <img slot="icon" src=""/>
                我的实战
            </mt-tab-item>
            <mt-tab-item>
                <img slot="icon" src=""/>
                我的猿问
            </mt-tab-item>
            <mt-tab-item>
                <img slot="icon" src=""/>
                我的手记
            </mt-tab-item>
        </mt-tabbar>
</div>
        <div>
            <mt-cell v-for="cell in cells" :title="cell['title']">
                <img slot="icon" width="20px"
                     src=""
                     width="" height=""/>
                <span>{{cell["value"]}}</span>
            </mt-cell>
            <div>

                <div>
                    <mt-cell :title="cells[0]['title']">
                        <mt-switch></mt-switch>
                        <img slot="icon" width="20px"
                             src=""
                             width="" height=""/>

                    </mt-cell>
                    <mt-cell :title="cells[1]['title']">
                        <span>{{cells[1]["value"]}}</span>
                        <img slot="icon" width="20px"
                             src=""
                             width="" height=""/>

                    </mt-cell>
                </div>
            </div>
</template>
<style>
    body {
        background-color: #f6f6f6;
    }
    .mint-tabbar{position:static;}
</style>
<script>
    import { Tabbar,TabItem,Cell,Switch } from 'mint-ui'
    export default{
        data()
    {
        return {
            position: "static",
            cells: [
                {title: '历史记录', value: ">"},
                {title: '我的路径', value: ">"},
                {title: '我的订单', value: ">"},
                {title: '购物车', value: ">"}
            ],
            cells2: [
                {title: '夜间模式', value: ">"},
                {title: '设置', value: ">"}
            ]
        }
    }
    ,
    components:{
        Tabbar,
                TabItem,
                Cell,
                Switch
    }
    }
</script>
